<template>
  <ContentWrap>
    <el-descriptions :column="1" border label-width="130">
      <el-descriptions-item label="采购计划编号">
        <el-select
          v-model="detailData.purchasePlanNo"
          filterable
          placeholder="请选择采购计划编号"
          disabled
        >
          <el-option
            v-for="item in ContractList"
            :key="item.planNo"
            :label="item.planNo"
            :value="item.planNo"
          />
        </el-select>
      </el-descriptions-item>
      <el-descriptions-item label="采购计划名称">
        {{ detailData.planName }}
      </el-descriptions-item>
      <el-descriptions-item label="采购预算(万元)">
        {{ detailData.purchaseBudget }}
      </el-descriptions-item>
      <el-descriptions-item label="采购方式">
        <el-radio-group v-model="detailData.purchaseMethod" disabled>
          <el-radio
            v-for="dict in getStrDictOptions(DICT_TYPE.PURCHASE_METHOD)"
            :key="dict.value"
            :label="dict.value"
          >
            {{ dict.label }}
          </el-radio>
        </el-radio-group>
      </el-descriptions-item>
      <el-descriptions-item label="项目理由">
        {{ detailData.projectReason }}
      </el-descriptions-item>
    </el-descriptions>
  </ContentWrap>
</template>
<script lang="ts" setup>
import { propTypes } from '@/utils/propTypes'
import { getStrDictOptions, DICT_TYPE } from '@/utils/dict'
import { PurchaseManageApi, PurchaseManageVO } from '@/api/erp/purchasemanage'
import { ContractApi, ContractVO } from '@/api/erp/contract'
import { PurchasePlanApi } from '@/api/erp/purchase/plan'

defineOptions({ name: 'SupplierDetail' })

const { query } = useRoute() // 查询参数

const props = defineProps({
  id: propTypes.string.def(undefined)
})
const detailLoading = ref(false) // 表单的加载中
const detailData = ref<any>({}) // 详情数据
const queryId = query.id as unknown as number // 从 URL 传递过来的 id 编号

/** 获得数据 */
const getInfo = async () => {
  detailLoading.value = true
  await getContractList()
  try {
    detailData.value = await PurchaseManageApi.getPurchaseManage(props.id || queryId)
  } finally {
    detailLoading.value = false
  }
}
defineExpose({ open: getInfo }) // 提供 open 方法，用于打开弹窗

/** 获取合同信息 */
const ContractList = ref([])
const getContractList = async () => {
  try {
    const data = await PurchasePlanApi.getPurchasePlanqueryAll()
    ContractList.value = data.list
  } finally {
  }
}
/** 关联采购计划 */
watch(
  () => detailData.value.purchasePlanNo,
  (newVal) => {
    if (!newVal) {
      detailData.value.id = undefined
      return
    }
    const matchedContract = ContractList.value.find((item) => item.planNo === newVal)
    detailData.value.planId = matchedContract ? matchedContract.id : undefined
    detailData.value.planName = matchedContract ? matchedContract.planName : undefined
  }
)

/** 初始化 **/
onMounted(() => {
  getInfo()
})
</script>
